<template>
      <div class="index-right" style="width:100%;">
                <div class="right-personal">
                  <div class="personal-classs">
                    <h2>今日授课</h2>
                    <div class="class-list">
                      <div class="list-card">
                        <div class="card-course">
                          <h2 class="text-title">2019秋_信息技术_集训_061</h2>
                          <p class="text-content">大前端兼全栈2019定制班</p>
                          <span class="content-class">开始上课</span>
                        </div>
                        <div class="triangle"></div>
                        <div class="card-progress">
                          <span class="line"></span>
                          <span class="circular"></span>
                          <p class="title">03-04&nbsp;9:00</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="personal-class-two">
                    <h2>明日备课</h2>
                    <div class="class-list">
                      <div class="list-card">
                        <div class="card-course">
                          <h2 class="text-title">2019秋_信息技术_集训061</h2>
                          <p class="text-content">大前端兼全栈2019定制班</p>
                          <span class="content-class">开始备课</span>
                        </div>
                        <div class="triangle"></div>
                        <div class="card-progress">
                          <span class="line"></span>
                          <span class="circular"></span>
                          <p class="title">03-05&nbsp;9:00</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="personal-report">
                    <div class="personal-report-title">班级管理</div>
       <!-- 1 -->
                    <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order">
                              <span>1</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2020春_信息技术_集训_069</p>
                              <p class="text-content">2020考研培训课程</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body">
                                <i class="el-icon-edit"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body">
                                <i class="el-icon-document-copy"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body">
                                <i class="el-icon-folder-opened"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress"></div>
                          <div class="circular"></div>
                          <span class="line-text">100%</span>
                        </div>
                      </div>
                    </div>
      <!-- 2 -->
                    <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order"
                             style="background-image: linear-gradient(-238deg,#e89b00,#ffbd39 19%,#fee37b 49%,#ffbd39 75%,#e89b00); box-shadow: inset 0 0 4px 1px rgba(251,255,89,.5);">
                              <span style="background-image: linear-gradient(-238deg,#e89b00,#feb901 29%,#fdd94f 49%,#feca01 68%,#e89b00); border: 0 solid hsla(0,0%,100%,.4);box-shadow: inset 0 0 4px 1px rgba(255,255,225,.5);">2</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2019冬_信息技术_集训_068</p>
                              <p class="text-content">17级</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                <i class="el-icon-edit" style="color: #fdf0bd;"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                <i class="el-icon-document-copy"  style="color: #fdf0bd;"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);" >
                                <i class="el-icon-folder-opened" style="color: #fdf0bd;"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress yellow"></div>
                          <div class="circular yellow"></div>
                          <span class="line-text" style="color: #fcc800;">100%</span>
                        </div>
                      </div>
                    </div>
      <!-- 3 -->
                    <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order" style="background-image: linear-gradient(-238deg,#36a392,#6fecd8 19%,#8dffed 49%,#69e7d3 75%,#36a392);box-shadow: inset 0 0 4px 1px #71f3df;">
                              <span style="background-image: linear-gradient(-238deg,#36a391,#63edd7 29%,#76fce7 49%,#66edd8 68%,#37a392); border: 0 solid hsla(0,0%,100%,.4);box-shadow: inset 0 0 4px 1px #a8fff1;">3</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2020冬_信息技术_集训_066</p>
                              <p class="text-content">测试</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-edit" style="color: #b1fff3;"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-document-copy" style="color: #b1fff3;"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-folder-opened" style="color: #b1fff3;"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress light-green"></div>
                          <div class="circular light-green"></div>
                          <span class="line-text" style="color: #57cfbc;">100%</span>
                        </div>
                      </div>
                    </div>

      <!-- 4 -->
        <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order">
                              <span>4</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2019冬_信息技术_集训_065</p>
                              <p class="text-content">嘉职17级测试班级</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body">
                                <i class="el-icon-edit"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body">
                                <i class="el-icon-document-copy"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body">
                                <i class="el-icon-folder-opened"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress"></div>
                          <div class="circular"></div>
                          <span class="line-text">100%</span>
                        </div>
                      </div>
                    </div>

                    <!-- 5 -->
                    <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order"
                             style="background-image: linear-gradient(-238deg,#e89b00,#ffbd39 19%,#fee37b 49%,#ffbd39 75%,#e89b00); box-shadow: inset 0 0 4px 1px rgba(251,255,89,.5);">
                              <span style="background-image: linear-gradient(-238deg,#e89b00,#feb901 29%,#fdd94f 49%,#feca01 68%,#e89b00); border: 0 solid hsla(0,0%,100%,.4);box-shadow: inset 0 0 4px 1px rgba(255,255,225,.5);">5</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2019冬_信息技术_集训_063</p>
                              <p class="text-content">嘉职17级定岗实习测试</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                <i class="el-icon-edit" style="color: #fdf0bd;"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                <i class="el-icon-document-copy"  style="color: #fdf0bd;"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);" >
                                <i class="el-icon-folder-opened" style="color: #fdf0bd;"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress yellow"></div>
                          <div class="circular yellow"></div>
                          <span class="line-text" style="color: #fcc800;">100%</span>
                        </div>
                      </div>
                    </div>

                    <!-- 6 -->
                    <div class="report-card">
                      <div class="info-body">
                        <div class="class-info">
                          <div class="info-left">
                            <div class="left-order" style="background-image: linear-gradient(-238deg,#36a392,#6fecd8 19%,#8dffed 49%,#69e7d3 75%,#36a392);box-shadow: inset 0 0 4px 1px #71f3df;">
                              <span style="background-image: linear-gradient(-238deg,#36a391,#63edd7 29%,#76fce7 49%,#66edd8 68%,#37a392); border: 0 solid hsla(0,0%,100%,.4);box-shadow: inset 0 0 4px 1px #a8fff1;">6</span>
                            </div>
                            <div class="info-text">
                              <p class="text-title">2019秋_信息技术_集训_061</p>
                              <p class="text-content">大前端兼全栈2019定制班</p>
                            </div>
                          </div>
                          <ul class="info-right">
                            <li class=" btns-item btns-item1">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-edit" style="color: #b1fff3;"></i>
                              </p>
                              <span>去上课</span>
                            </li>
                            <li class=" btns-item btns-item2">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-document-copy" style="color: #b1fff3;"></i>
                              </p>
                              <span>班级态势表</span>
                            </li>
                            <li class=" btns-item btns-item3">
                              <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);">
                                <i class="el-icon-folder-opened" style="color: #b1fff3;"></i>
                              </p>
                              <span>相册</span>
                            </li>
                          </ul>
                        </div>
                        <div class="progress-line">
                          <div class="progress light-green"></div>
                          <div class="circular light-green"></div>
                          <span class="line-text" style="color: #57cfbc;">100%</span>
                        </div>
                      </div>
                    </div>

                    <!-- 7 -->
                    <div class="report-card">
                                    <div class="info-body">
                                      <div class="class-info">
                                        <div class="info-left">
                                          <div class="left-order">
                                            <span>7</span>
                                          </div>
                                          <div class="info-text">
                                            <p class="text-title">2019科职富强班</p>
                                            <p class="text-content">2019科职java实训-富强班</p>
                                          </div>
                                        </div>
                                        <ul class="info-right">
                                          <li class=" btns-item btns-item1">
                                            <p class="btns-icon-body">
                                              <i class="el-icon-edit"></i>
                                            </p>
                                            <span>去上课</span>
                                          </li>
                                          <li class=" btns-item btns-item2">
                                            <p class="btns-icon-body">
                                              <i class="el-icon-document-copy"></i>
                                            </p>
                                            <span>班级态势表</span>
                                          </li>
                                          <li class=" btns-item btns-item3">
                                            <p class="btns-icon-body">
                                              <i class="el-icon-folder-opened"></i>
                                            </p>
                                            <span>相册</span>
                                          </li>
                                        </ul>
                                      </div>
                                      <div class="progress-line">
                                        <div class="progress"></div>
                                        <div class="circular"></div>
                                        <span class="line-text">100%</span>
                                      </div>
                                    </div>
                                  </div>
                    <!-- 8-->
                                  <div class="report-card">
                                    <div class="info-body">
                                      <div class="class-info">
                                        <div class="info-left">
                                          <div class="left-order"
                                           style="background-image: linear-gradient(-238deg,#e89b00,#ffbd39 19%,#fee37b 49%,#ffbd39 75%,#e89b00); box-shadow: inset 0 0 4px 1px rgba(251,255,89,.5);">
                                            <span style="background-image: linear-gradient(-238deg,#e89b00,#feb901 29%,#fdd94f 49%,#feca01 68%,#e89b00); border: 0 solid hsla(0,0%,100%,.4);box-shadow: inset 0 0 4px 1px rgba(255,255,225,.5);">8</span>
                                          </div>
                                          <div class="info-text">
                                            <p class="text-title">2019科职java测试班</p>
                                            <p class="text-content">2019科职java实训教学进度计划</p>
                                          </div>
                                        </div>
                                        <ul class="info-right">
                                          <li class=" btns-item btns-item1">
                                            <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                              <i class="el-icon-edit" style="color: #fdf0bd;"></i>
                                            </p>
                                            <span>去上课</span>
                                          </li>
                                          <li class=" btns-item btns-item2">
                                            <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);">
                                              <i class="el-icon-document-copy"  style="color: #fdf0bd;"></i>
                                            </p>
                                            <span>班级态势表</span>
                                          </li>
                                          <li class=" btns-item btns-item3">
                                            <p class="btns-icon-body" style="background-image: linear-gradient(90deg,#e89b00,#fcc800);" >
                                              <i class="el-icon-folder-opened" style="color: #fdf0bd;"></i>
                                            </p>
                                            <span>相册</span>
                                          </li>
                                        </ul>
                                      </div>
                                      <div class="progress-line">
                                        <div class="progress yellow"></div>
                                        <div class="circular yellow"></div>
                                        <span class="line-text" style="color: #fcc800;">100%</span>
                                      </div>
                                    </div>
                                  </div>
                  </div>
                </div>
             </div>
</template>

<script>
	export default{
		data(){
			return{

			}
		},
		components:{

		},
		methods:{

		}
	}
</script>

<style>
 /* 右边部分 */
 .index-right{
   overflow: hidden;
   /* border: 1px solid black; */
   width: 100%;
   height: 100%;
 }
 /* .el-main {
   overflow: hidden;
   display: block;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   -ms-flex-preferred-size: auto;
   flex-basis: auto;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px;
 } */
 .right-personal{
   /* border: 1px solid blue; */
   width: 100%;
   height: 100%;
   padding-left: 20px;
 }
 /* 右边第一部分 */
 .personal-classs{
   width: 100%;
   min-height: 15.625rem;
   background-color: #fff;
 }
 .personal-classs h2{
   font-family: PingFangSC-Regular;
   padding: 0.625rem 0 0.625rem 1.5rem;
   font-size: 18px;
   color: #333;
 }
 .class-list{
   /* border: 1px solid orange; */
   width: 100%;
   height: 180px;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   display: -ms-flexbox;
   display: flex;
 }
 .list-card{
   /* border: 1px solid olivedrab; */
   width: 317px;
   height: 180px;
   position: relative;
 }
 /* 卡片 */
 .card-course{
   box-shadow: 0 0.02rem 0.1rem 0 rgba(0,0,0,.2);
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   margin-left: 8%;
   width: 295px;
   height: 135px;
   color: #000;
   text-align: center;
   /* margin-left: 7%; */
   border-radius: .5rem;
   background-color: #f5f5f5;
 }
 /* 标题 */
 .card-course .text-title{
   color: #fff;
   padding: .24rem .3rem .6rem;
   font-family: PingFangSC-Regular;
   padding: 1.27rem 0 .8rem .24rem;
   font-size: 1.9rem;
 }
 /* 文本 */
 .card-course .text-content{
   font-family: PingFangSC-Regular;
   font-size: 1.14rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   color: #fff;
 }
 /*上课 */
 .card-course .content-class{
   background: #fcc800;
   width: 42.85%;
   margin-top: 2.8rem;
   background-image: none;
   padding: .5rem .16rem;
   color: #fff;
   font-size: 1.14rem;
   cursor: pointer;
   text-align: center;
   border-radius: .5rem;
   vertical-align: middle;
   display: inline-block;
   font-family: PingFangSC-Regular;
 }
 .triangle{
   border-color: #3986f7 transparent transparent;
   width: 0;
   height: 0;
   border-width: 1.1rem;
   border-style: solid;
   /* border-color: #f5f5f5 transparent transparent; */
   right: 43%;
   position: absolute;
 }
 .card-progress{
   /* border: 1px solid lightgreen; */
   margin-left: 8%;
   margin-top: 10px;
   position: relative;
   width: 92%;
   height: 27px;
 }
 .card-progress .line{
   margin-top: .2rem;
   width: 100%;
   height: .01rem;
   display: block;
   background-color: #d8d8d8;
 }
 .card-progress .circular{
   background-color: #3986f7;
   right: 49%;
   width: .9rem;
   height: .9rem;
   display: block;
   border-radius: 50%;
   top: .2rem;
   position: absolute;
 }
 .card-progress .title{
   padding-top: 1.2rem;
   font-size: 1.14rem;
   color: #d9d9d9;
   margin-left: .24rem;
   text-align: center;
   color: #3986f7;
   margin-left: 0;
 }
 /* 右边第二部分 */
 .personal-class-two{
   color: black;
   /* border:1px solid skyblue; */
   margin-top: .9rem;
   background-color: #fff;
   width: 100%;
   min-height: 250px;
 }
 .personal-class-two h2{
 font-family: PingFangSC-Regular;
 padding: 0.625rem 0 0.625rem 1.5rem;
 font-size: 18px;
 color: #333;
 }
 .personal-class-two .text-title,.text-content{
   color: black;
 }
 .personal-class-two .text-content{
   color: black;
 }
 .personal-class-two .content-class{
   background-image: linear-gradient(-90deg,#1c5edc,#1a99f9);
 }
 .personal-class-two .card-course{
   box-shadow: 0 0.02rem 1.1rem 0 rgba(0,0,0,.2);
   background-color: #fff!important;
   background-image: none!important;
 }
 .personal-class-two .line{
   margin-top: 1.2rem;
   width: 100%;
   height: .1rem;
   display: block;
   background-color: #d8d8d8;
 }
 .personal-class-two .triangle{
   border-color: #fff transparent transparent!important;
   width: 0;
   height: 0;
   border-width: .9rem;
   border-style: solid;
   border-color: #f5f5f5 transparent transparent;
   right: 43%;
   position: absolute;
 }
 .personal-class-two .circular{
   margin-top:-.5rem;
 }
 /* 班级管理 */
 .personal-report{
   width:100%;
 }
 .personal-report-title{
   /* border: 1px solid yellow; */
   width:100%;
   height: 56px;
   font-family: PingFangSC-Regular;
   margin-top: .5rem;
   padding-right: 71rem;
   line-height: 56px;
   font-size: 1.7rem;
   color: #333;
   background-color: #fff;
 }
 /* 第一个班级 */
 .report-card{
   /* border:1px solid red; */
   margin-top: .9rem;
   height: 131px;
   background-color: #fff;
   width: 100%;
 }
 .info-body{
   color: #000;
   height: 100%;
   width: 100%;
   -ms-flex-direction: column;
   flex-direction: column;
   display: -ms-flexbox;
   display: flex;
   background-color: #fff;
 }
 .class-info{
   /* border:1px solid black; */
   -ms-flex-align: center;
   align-items: center;
   display: -ms-flexbox;
   display: flex;
   height: 75.88px;
 }
 .info-left{
   /* border: 1px solid blue; */
   width: 650px;
   height: 73px;
   display: -ms-flexbox;
   display: flex;
 }
 .left-order{
   /* border: 1px solid yellow; */
   text-align: center;
   background-image: linear-gradient(-238deg,#1064dc,#2387ee 19%,#2f9cf9 49%,#2285ed 75%,#1064dc);
   box-shadow: inset 0 0 4px 1px rgba(89,227,255,.5);
   border-radius: .5rem;
   width: 39px;
   height: 45px;
   margin: 1.32rem 1.2rem 0;
 }
 .left-order span{
   line-height: 39px;
   font-size: 14px;
   color: #fff;
   border-radius: .3rem;
   margin-top: .3rem;
   width: 3.1rem;
   height: 38px;
   display: inline-block;
   background-image: linear-gradient(-238deg,#207bfe,#449ffd 29%,#4faefe 49%,#469efc 68%,#207bfe);
   border: 0 solid hsla(0,0%,100%,.4);
   box-shadow: inset 0 0 1px 2px rgba(225,246,255,.25);
 }
 .info-text{
   /* border: 1px solid blueviolet; */
   text-align: left;
   margin-top: 1.25rem;
   width: 60%;
 }
 .info-text .text-title{
   font-family: PingFangSC-Semibold;
   width: 80%;
   padding-bottom: .9rem;
   font-size: 1.8rem;
   color: #333;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding-right: 90px;
 }
 .info-text .text-content{
   color: black;
   margin-left: 5px;
   text-align: left;
 }
 .info-right{
   /* border: 1px solid greenyellow; */
   width: 244px;
   height: 75px;
   margin-right: 2%;
   right: 2%;
   padding-top:12px;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: justify;
   justify-content: space-between;
   list-style: none;
 }
 .info-right btns-item{
   /* border: 1px solid black; */
   width: auto;
   height: auto;
   margin-top: .25rem;
   text-align: center;

 }
 /* 图型 */
 .btns-item .btns-icon-body {
   width: 35px;
   height: 35px;
   line-height: .42rem;
   text-align: center;
   margin: 0 auto;
   cursor: pointer;
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   border-radius: 50%;
 }
 /* 图像 */
 .btns-item .btns-icon-body i{
   margin-top: 6px;
   text-align: center;
   font-size: 2.25rem;
   color: #c8e7ff;
 }
 .btns-item span {
   font-family: PingFangSC-Regular;
   font-size: 1.14rem;
   color: #666;
 }
 .progress-line{
   /* border: 1px solid lawngreen; */
   width: 95.5%;
   height: 3.5px;
   background-color: #f0f0f0;
   margin-top: 1.89rem;
   left: 2%;
   position: relative;
 }
 .progress{
   width:100%;
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   height: 100%;
 }
 .progress-line .circular{
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   box-shadow: 0 0 0.15rem #189af9;
   background-color: #189af9;
   top: -.4rem;
   position: absolute;
   margin-left: 838px;
 }
 .line-text{
   left:99%;
   font-family: PingFangSC-Regular;
   font-size: 1.12rem;
   color: #4c72ff;
   top: .6rem;
   position: absolute;
 }
 .yellow{
   background-image: linear-gradient(90deg,#e89b00,#fcc800);
 }
 .light-green{
   background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);
 }
 /* 右边部分 */
 .index-right{
   overflow: hidden;
   /* border: 1px solid black; */
   width: 80%;
   height: 100%;
 }
 .el-main {
   overflow: hidden;
   display: block;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   -ms-flex-preferred-size: auto;
   flex-basis: auto;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px;
 }
 .right-personal{
   /* border: 1px solid blue; */
   width: 100%;
   height: 100%;
   padding-left: 20px;
 }
 /* 右边第一部分 */
 .personal-class{
   /* border: 1px solid pink; */
   width: 100%;
   min-height: 250px;
   background-color: #fff;
 }
 .personal-class h2{
   font-family: PingFangSC-Regular;
   padding: .5rem 70rem 1.9rem .24rem;
   font-size: 18px;
   color: #333;
 }
 .class-list{
   /* border: 1px solid orange; */
   width: 100%;
   height: 180px;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   display: -ms-flexbox;
   display: flex;
 }
 .list-card{
   /* border: 1px solid olivedrab; */
   width: 317px;
   height: 180px;
   position: relative;
 }
 /* 卡片 */
 .card-course{
   box-shadow: 0 0.02rem 0.1rem 0 rgba(0,0,0,.2);
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   margin-left: 8%;
   width: 295px;
   height: 135px;
   color: #000;
   text-align: center;
   /* margin-left: 7%; */
   border-radius: .5rem;
   background-color: #f5f5f5;
 }
 /* 标题 */
 .card-course .text-title{
   color: #fff;
   padding: .24rem .3rem .6rem;
   font-family: PingFangSC-Regular;
   padding: 1.27rem 0 .8rem .24rem;
   font-size: 1.9rem;
 }
 /* 文本 */
 .card-course .text-content{
   font-family: PingFangSC-Regular;
   font-size: 1.14rem;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   color: #fff;
 }
 /*上课 */
 .card-course .content-class{
   background: #fcc800;
   width: 42.85%;
   margin-top: 2.8rem;
   background-image: none;
   padding: .5rem .16rem;
   color: #fff;
   font-size: 1.14rem;
   cursor: pointer;
   text-align: center;
   border-radius: .5rem;
   vertical-align: middle;
   display: inline-block;
   font-family: PingFangSC-Regular;
 }
 .triangle{
   border-color: #3986f7 transparent transparent;
   width: 0;
   height: 0;
   border-width: 1.1rem;
   border-style: solid;
   /* border-color: #f5f5f5 transparent transparent; */
   right: 43%;
   position: absolute;
 }
 .card-progress{
   /* border: 1px solid lightgreen; */
   margin-left: 8%;
   margin-top: 10px;
   position: relative;
   width: 92%;
   height: 27px;
 }
 .card-progress .line{
   margin-top: .2rem;
   width: 100%;
   height: .01rem;
   display: block;
   background-color: #d8d8d8;
 }
 .card-progress .circular{
   background-color: #3986f7;
   right: 49%;
   width: .9rem;
   height: .9rem;
   display: block;
   border-radius: 50%;
   top: .2rem;
   position: absolute;
 }
 .card-progress .title{
   padding-top: 1.2rem;
   font-size: 1.14rem;
   color: #d9d9d9;
   margin-left: .24rem;
   text-align: center;
   color: #3986f7;
   margin-left: 0;
 }
 /* 右边第二部分 */
 .personal-class-two{
   color: black;
   /* border:1px solid skyblue; */
   margin-top: .9rem;
   background-color: #fff;
   width: 100%;
   min-height: 250px;
 }
 .personal-class-two h2{
   font-family: PingFangSC-Regular;
   padding: .5rem 70rem 1.9rem .24rem;
   font-size: 18px;
   color: #333;
 }
 .personal-class-two .text-title,.text-content{
   color: black;
 }
 .personal-class-two .text-content{
   color: black;
 }
 .personal-class-two .content-class{
   background-image: linear-gradient(-90deg,#1c5edc,#1a99f9);
 }
 .personal-class-two .card-course{
   box-shadow: 0 0.02rem 1.1rem 0 rgba(0,0,0,.2);
   background-color: #fff!important;
   background-image: none!important;
 }
 .personal-class-two .line{
   margin-top: 1.2rem;
   width: 100%;
   height: .1rem;
   display: block;
   background-color: #d8d8d8;
 }
 .personal-class-two .triangle{
   border-color: #fff transparent transparent!important;
   width: 0;
   height: 0;
   border-width: .9rem;
   border-style: solid;
   border-color: #f5f5f5 transparent transparent;
   right: 43%;
   position: absolute;
 }
 .personal-class-two .circular{
   margin-top:-.5rem;
 }
 /* 班级管理 */
 .personal-report{
   width:100%;
 }
 .personal-report-title{
   /* border: 1px solid yellow; */
   width:100%;
   height: 56px;
   font-family: PingFangSC-Regular;
   margin-top: .5rem;
   padding-right: 71rem;
   line-height: 56px;
   font-size: 1.7rem;
   color: #333;
   background-color: #fff;
 }
 /* 第一个班级 */
 .report-card{
   /* border:1px solid red; */
   margin-top: .9rem;
   height: 131px;
   background-color: #fff;
   width: 100%;
 }
 .info-body{
   color: #000;
   height: 100%;
   width: 100%;
   -ms-flex-direction: column;
   flex-direction: column;
   display: -ms-flexbox;
   display: flex;
   background-color: #fff;
 }
 .class-info{
   /* border:1px solid black; */
   -ms-flex-align: center;
   align-items: center;
   display: -ms-flexbox;
   display: flex;
   height: 75.88px;
 }
 .info-left{
   /* border: 1px solid blue; */
   width: 650px;
   height: 73px;
   display: -ms-flexbox;
   display: flex;
 }
 .left-order{
   /* border: 1px solid yellow; */
   text-align: center;
   background-image: linear-gradient(-238deg,#1064dc,#2387ee 19%,#2f9cf9 49%,#2285ed 75%,#1064dc);
   box-shadow: inset 0 0 4px 1px rgba(89,227,255,.5);
   border-radius: .5rem;
   width: 39px;
   height: 45px;
   margin: 1.32rem 1.2rem 0;
 }
 .left-order span{
   line-height: 39px;
   font-size: 14px;
   color: #fff;
   border-radius: .3rem;
   margin-top: .3rem;
   width: 3.1rem;
   height: 38px;
   display: inline-block;
   background-image: linear-gradient(-238deg,#207bfe,#449ffd 29%,#4faefe 49%,#469efc 68%,#207bfe);
   border: 0 solid hsla(0,0%,100%,.4);
   box-shadow: inset 0 0 1px 2px rgba(225,246,255,.25);
 }
 .info-text{
   /* border: 1px solid blueviolet; */
   text-align: left;
   margin-top: 1.25rem;
   width: 60%;
 }
 .info-text .text-title{
   font-family: PingFangSC-Semibold;
   width: 80%;
   padding-bottom: .9rem;
   font-size: 1.8rem;
   color: #333;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   padding-right: 90px;
 }
 .info-text .text-content{
   color: black;
   margin-left: 5px;
   text-align: left;
 }
 .info-right{
   /* border: 1px solid greenyellow; */
   width: 244px;
   height: 75px;
   margin-right: 2%;
   right: 2%;
   padding-top:12px;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: justify;
   justify-content: space-between;
   list-style: none;
 }
 .info-right btns-item{
   /* border: 1px solid black; */
   width: auto;
   height: auto;
   margin-top: .25rem;
   text-align: center;

 }
 /* 图型 */
 .btns-item .btns-icon-body {
   width: 35px;
   height: 35px;
   line-height: .42rem;
   text-align: center;
   margin: 0 auto;
   cursor: pointer;
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   border-radius: 50%;
 }
 /* 图像 */
 .btns-item .btns-icon-body i{
   margin-top: 6px;
   text-align: center;
   font-size: 2.25rem;
   color: #c8e7ff;
 }
 .btns-item span {
   font-family: PingFangSC-Regular;
   font-size: 1.14rem;
   color: #666;
 }
 .progress-line{
   /* border: 1px solid lawngreen; */
   width: 95.5%;
   height: 3.5px;
   background-color: #f0f0f0;
   margin-top: 1.89rem;
   left: 2%;
   position: relative;
 }
 .progress{
   width:100%;
   background-image: linear-gradient(90deg,#1c5edc,#1a99f9);
   height: 100%;
 }
 .progress-line .circular{
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
   box-shadow: 0 0 0.15rem #189af9;
   background-color: #189af9;
   top: -.4rem;
   position: absolute;
   margin-left: 838px;
 }
 .line-text{
   left:99%;
   font-family: PingFangSC-Regular;
   font-size: 1.12rem;
   color: #4c72ff;
   top: .6rem;
   position: absolute;
 }
 .yellow{
   background-image: linear-gradient(90deg,#e89b00,#fcc800);
 }
 .light-green{
   background-image: linear-gradient(90deg,#36a392 4%,#57cfbc);
 }

</style>
